<template>
  <div class="dept">
    <pageTable ref="pageTableRef" :pageName="pageName" :header="headers" noAddEdit>
      <template #client="row">
        {{ `${row.username}@${row.name}` }}
      </template>
      <template #code="row">
        <span @click="copy(row.code)">{{ row.code }}</span>
      </template>
      <template #password="row">
        <template v-if="!row.password"> 无 </template>
        <template v-else>
          <span style="margin-right: 10px">
            <template v-if="showPasswordIds.includes(row.id)">
              {{ row.password }}
              <t-icon
                style="margin-left: 10px; cursor: pointer"
                name="copy"
                @click="copy(row.password)"
              />
            </template>
            <template v-else>******</template>
          </span>
          <span style="cursor: pointer">
            <svg
              v-if="!showPasswordIds.includes(row.id)"
              @click="showPasswordIds.push(row.id)"
              fill="none"
              viewBox="0 0 26 24"
              width="1em"
              height="1em"
              class="t-icon t-icon-browse-off t-input__suffix-clear"
            >
              <path
                fill="currentColor"
                d="M4 1.59l6.17 6.17 7.07 7.07L23.41 21 22 22.41l-2.97-2.96A12.5 12.5 0 011.08 12.3L1 12l.1-.3c.77-2.4 2.24-4.5 4.18-6.02L2.59 3 4 1.59zM6.7 7.1A10.53 10.53 0 003.1 12a10.5 10.5 0 0014.45 5.97l-1.8-1.8a5 5 0 01-6.93-6.93L6.7 7.11zm3.6 3.6a3 3 0 004 4l-4-4zM13 5c-.58 0-1.14.05-1.7.14l-.98.16L10 3.32l.99-.16A12.5 12.5 0 0124.9 11.7l.1.31-.1.3c-.41 1.3-1.03 2.5-1.82 3.58l-.59.8-1.61-1.18.59-.8c.6-.82 1.08-1.73 1.42-2.7A10.5 10.5 0 0013 5zm.51 1.93l.96.29a5 5 0 013.31 3.31l.3.96-1.92.58-.3-.95a3 3 0 00-1.98-1.99l-.95-.3.58-1.9z"
              ></path>
            </svg>
            <svg
              v-else
              @click="showPasswordIds = showPasswordIds.filter((id) => id !== row.id)"
              fill="none"
              viewBox="0 0 24 24"
              width="1em"
              height="1em"
              class="t-icon t-icon-browse t-input__suffix-clear"
            >
              <g clipPath="url(#clip0_8726_7319)">
                <path
                  fill="currentColor"
                  d="M2.1 12a10.5 10.5 0 0019.8 0 10.5 10.5 0 00-19.8 0zm-2.01-.3a12.5 12.5 0 0123.82 0l.1.3-.1.3a12.5 12.5 0 01-23.82 0l-.1-.3.1-.3zM12 9a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0z"
                ></path>
              </g>
            </svg>
          </span>
        </template>
      </template>
      <template #online="row">
        <t-tag :theme="row.online ? 'success' : 'default'" variant="light">{{
          row.online ? '在线' : '离线'
        }}</t-tag>
      </template>
    </pageTable>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import pageTable from '@/components/page-table/page-table.vue'
import clipboard3 from 'vue-clipboard3'
import { MessagePlugin } from 'tdesign-vue-next'

const pageName = 'client'
const headers = [
  { colKey: 'user', title: '用户', align: 'center', ellipsis: true },
  { colKey: 'client', title: '设备', align: 'center', ellipsis: true },
  { colKey: 'os', title: '系统', align: 'center', ellipsis: true },
  { colKey: 'code', title: '设备码', align: 'center', ellipsis: true },
  { colKey: 'password', title: '密码', align: 'center', ellipsis: true },
  { colKey: 'online', title: '状态', align: 'center', ellipsis: true },
  { colKey: 'created_at', title: '创建时间', align: 'center', ellipsis: true },
  { colKey: 'updated_at', title: '更新时间', align: 'center', ellipsis: true }
]
const showPasswordIds = ref<number[]>([])
const { toClipboard } = clipboard3()
const copy = (val: string) => {
  toClipboard(val).then(() => {
    MessagePlugin.success('复制成功')
  })
}
</script>
